<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>loginPage</title>
    <style type="text/css">
        *{margin: 0;padding: 0;box-sizing: border-box;}
        input{outline: none;}
        input[type='text'],input[type="password"]{border-width: 0 0 1px 0;}
        body{background-color: #226666;}
        div.center{width: 80%;height: 275px;margin: 50px auto;border-radius: 6px;}
        div.left,div.right{width: 50%;height: 100%;display: inline-block;float: left;}
        div.left{background-color: rgb(118,104,223);color: rgb(255,255,255);text-indent: 2%;position: relative;}
        div.left div.textContent{position: absolute;top: 50%;transform: translateY(-50%);padding-left: 3%;width: 50%;}
        div.left div.textContent span{text-align: justify;margin-top: 6px;display: block;}

        div.right{background-color:rgb(255,255,255);font-size: 14px;}
        div.center div.right form{width: 85%;height: 100%;position: relative;padding: 20px 0 20px 20px;}
        form label{width: 100%;height: 60px;display: block;}
        form input[type='text'],input[type="password"]{width: 100%;height: 30px;outline: none;font-size: 16px;letter-spacing: 1px ;font-weight: bold;text-indent: 2%;border-bottom: 1px solid rgb(118,104,223);}
        div.labelCon{width: 100%;height: 30px;position: relative;}
        div.labelCon #yzm{width: 43%;position: absolute;left:0;top: 0;}
        label span{font-size: 13px;}
        form input[type='submit'],form input[type='reset']{width: 85px;height: 26px;border: none;border-radius: 3px;color: rgb(255,255,255);opacity: 0.8;font-size: 17px;}
        form input[type='submit']{background-color: rgb(118,104,223);margin-bottom: 0px;}
        form input[type='submit']:hover {opacity: 1;}
        form input[type='reset']{background-color: #ff0000;margin-bottom: 0px;}
        form input[type='reset']:hover{opacity: 1;}
        form label.option p{display: inline-block;}
        form label p.autoOption{float: right;}
        div.submitAndReset{margin-top: 15px;}
        img.checkcode{width: 70px;height: 30px;line-height: 30px;float:right;margin-right: 5px;}
        #refreash{line-height: 30px;display: inline-block;float: right;cursor: pointer;}
        #refreash:hover {color: rgb(118,104,223);}


    @media screen and (min-width:600px) and (max-width:1035px){
       div.left,div.right{width: 80%;display: block;margin: 0 auto;}
    }
    @media screen and (max-width: 600px) {
       div.left,div.right{width: 100%;display: block;}
    }
    </style>
</head>
<body>
<div class="center">
	<div class="left">
    <div class="textContent">
        <h1>欢迎登录</h1><span>xx信息管理系统</span>
    </div>

    </div>
	<div class="right">
	    <form action="selectStudentServlet" method="post" id="loginForm">
	        <label><input type="text" name="uid" id="uid" required="required" placeholder="用户名"><span></span></label>
	        <label><input type="password" name="upass" id="upass" required="required" autocomplete="off" placeholder="密码"><span></span></label>
            <label>
            	<div class="labelCon">
            		<input type="text" name="yzm" id="yzm" required="required" autocomplete="off" placeholder="验证码">
                    <p id="refreash">看不清？换一张</p>
            		<img src="imageServlet" class="checkcode">
            	</div><span></span>
	   		</label>
            <label class="option"><p>没有账号？<a href="#">注册</a></p>
                <p class="autoOption"><input type="checkbox" id="rememberPass">记住密码
                <input type="checkbox" id="autoLogin">自动登录</p>
                <div class="submitAndReset">
                     <input type="submit" value="登录" id="submit">
                     <input type="reset" value="重置" id="reset">
                </div>

            </label>

    	</form>
	</div>

</div>
<!-- a用于刷新页面的验证码 -->
 <script type="text/javascript">
 var refreash=document.getElementById("refreash");
 refreash.onclick=function(){
    // a获得img对象，改变img对象的src属性值
	 this.nextElementSibling.src = this.nextElementSibling.src + "?" + Math.random();
 }
</script>

<script type="text/javascript">
    var uid=document.getElementById("uid");
    var upass=document.getElementById("upass");
    var yzm=document.getElementById("yzm");
    var rememberPass=document.getElementById("rememberPass");

    uid.onblur=function(){
        var regx=/^\d{8}$/;
        var flag=regx.test(this.value);
        message(this,flag,'账户为八位数数字');
        return flag;
    }

    upass.onblur=function(){
        var regx=/^(?![A-Za-z]+$)(?![A-Z0-9]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![A-Z\W_!@#$%^&*`~()-+=+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,10}$/;
        var flag=regx.test(this.value);
        message(this,flag,'密码为10位以下包含数字、字母、特殊符号的混合');
        return flag;
    }

    yzm.onblur=function(){
        var regx=/[A-Za-z0-9]{4}/;
        var flag=regx.test(this.value);
        message(this,flag,'请仔细填写图片中的验证码');
        return flag;
    }

function message(obj,flag,error){
    if(obj==yzm){
        var span=obj.parentNode.nextElementSibling;
    }else{
        var span=obj.nextElementSibling;
    }
    span.style.cssText="color: red;display: block;margin: 8px 0;";
    var yes="border-bottom: 1px solid green;background-color: none;";
    var no="border-bottom: 1px solid red";
    if(flag){
        obj.style.cssText=yes;
        span.innerHTML="";
    }else{
        obj.style.cssText=no;
        span.innerHTML=error;
        //console.log(span);
    }
}

document.getElementById('submit').onclick=function(){
    return uid.onblur()&&upass.onblur()&&yzm.onblur();
}

document.getElementById("reset").onclick=function(){
    clearAllStyle(uid);
    clearAllStyle(upass);
    clearAllStyle(yzm);
}

// a清除所有的提示样式
function clearAllStyle(obj){
    obj.style.cssText="border-bottom: 1px solid rgb(118,104,223);";
    if(obj==yzm){
        var brother=obj.parentNode.nextSibling;
    }else{
        var brother=obj.nextElementSibling;
    }
    brother.style.cssText="";
    brother.innerHTML="";
}

window.onload = function(){
    //页面初始化时，如果帐号密码cookie存在则填充
    if (getCookie('uid') && getCookie('upass')) {
        uid.value = getCookie('uid');
        upass.value = getCookie('upass');
        rememberPass.checked = true;
    }
    //复选框勾选状态发生改变时，如果未勾选则清除cookie
    rememberPass.onchange = function() {
        if (!this.checked) {
            delCookie('uid');
            delCookie('upass');
        }
    };
    //表单提交事件触发时，如果复选框是勾选状态则保存cookie
    document.getElementById("loginForm").onsubmit = function() {
        if (rememberPass.checked) {
            setCookie('uid', uid.value, 1);
            setCookie('upass', upass.value, 1);
            // alert("success!");
        }
    };
}
//得到cookie名为name的value值
function getCookie(name){
    var cookieArray=document.cookie.split(";");
    for(var i=0;i<cookieArray.length;++i){
        var cookies=cookieArray[i].split("=");
        if(cookies[0].trim()==name){
            return cookies[1];
        }
    }
   if(i==cookieArray.length){
        return "";
   }
}

//设置名为cname,值为cvalue,过期时间为exdays天的cookie
//d.getTime()获得了1970年至此刻的时间毫秒差
//d.toGMTString()是形如:Thu, 20 Feb 2020 07:54:01 GMT的时间
function setCookie(cname,cvalue,exdays){
   var d = new Date();
   d.setTime(d.getTime()+(exdays*24*60*60*1000));
   var expires = "expires="+d.toGMTString();
   document.cookie = cname + "=" + cvalue + "; " + expires;
}

//删除cookie
function delCookie(name) {
    setCookie(name, null, -1);
}

</script>
</body>
</html>
